<template>
  <div>
    <XmTable :config="tableConfig" :noWatchParams="noWatchParams" class="table th_default" ref="table"
      row-key="id">
      <div slot="filter">
        <el-form class="fl mb-10" :inline="true">
          <el-form-item label="后台单号">
            <el-input size="small" v-model="noWatchParams.xmbzNo" placeholder="后台单号"></el-input>
          </el-form-item>
          <el-form-item label="城市">
            <CitySelect class="w-100" size="small" v-model="noWatchParams.cityId" clearable filterable></CitySelect>
          </el-form-item>
          <el-form-item label="部门失误类型">
            <DepartmentTypeCascader @change="handleDepartmentChange" size="small" v-model="complaintContent" clearable></DepartmentTypeCascader>
          </el-form-item>
          <el-form-item label="处理状态">
            <XmSelect size="small" v-model="noWatchParams.handleState" :options="statusList" clearable></XmSelect>
          </el-form-item>
          <el-form-item label="申诉时间">
            <el-date-picker
              size="small"
              v-model="startAndEndTime"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              :default-time="['00:00:00', '23:59:59']"
              value-format="yyyy-MM-dd HH:mm:ss"
              format="yyyy-MM-dd HH:mm:ss"
              :picker-options="pickerOptions"
              align="right"
              clearable
              @change="handleTimeChange"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              @click="search"
              size="small"
              plain
              icon="el-icon-search"
            >查询</el-button>
          </el-form-item>
        </el-form>
      </div>

      <template slot="column-appealImgs" slot-scope="{data}">
        <img :src="item" v-for="(item,index) in changeAppealImgs(data.extJson)" :key="index" class="w-80 h-80 cs-p pd-4"
                @click="handBigPhoto(item)">
      </template>
      <template slot="column-handleImgs" slot-scope="{data}">
        <img :src="item" v-for="(item,index) in changeHandleImgs(data.extJson)" :key="index" class="w-80 h-80 cs-p pd-4"
                @click="handBigPhoto(item)">
      </template>
      <template slot="column-content" slot-scope="{data}">
        <template v-if="data.content">
          <el-tag class="mr-10 mb-5" v-for="(item, i) in data.content.split('、')" :key="i">{{item}}</el-tag>
        </template>
      </template>
      <template slot="column-tag" slot-scope="{data}">
        <span class="c-red">{{wordTagTypeMap[data.tag] || '-'}}</span>
      </template>
      <template slot="column-handleState" slot-scope="{data}">
        <el-tag v-if="statusList.find(item => item.value == data.handleState)" size="small" :type="statusList.find(item => item.value == data.handleState).type">
          {{ statusList.find(item => item.value == data.handleState).label }}
        </el-tag>
      </template>
      <template slot="column-operate" slot-scope="{data}">
        <el-button v-xmbz-permission="'classification_productAppeal_handle'" class="edit-btn" size="mini" @click="handleOrder(data)">
          处理
        </el-button>
        <el-button class="edit-btn ml-0 mt-5" size="mini" @click="handleViewLog(data)">
          查看日志
        </el-button>
      </template>
    </XmTable>
    <handleOrderDialog ref="handleOrderDialog" @submit="onSubmit"></handleOrderDialog>
    <imgDialog ref="imgDialog"></imgDialog>
    <orderLogDialog ref="orderLogDialog"></orderLogDialog>
  </div>
</template>

<script>
import tableConfig from './config/table'
import handleOrderDialog from './components/handleOrderDialog'
import { wordTagTypeMap } from '@/const'
import imgDialog from '@/components/dialog/imgDialog'
import orderLogDialog from '@/components/dialog/orderLogDialog'
const complaintTypeList = [{

}]
const statusList = [{
  label: '待处理',
  value: 1,
  type: 'info',
},{
  label: '同意',
  value: 2,
  type: 'success',
},{
  label: '驳回',
  value: 3,
  type: 'danger',
},]
export default {
  data() {
    return {
      complaintTypeList,
      statusList,
      wordTagTypeMap,
      tableConfig,
      startAndEndTime: [
        this.dayjs().format('YYYY-MM-DD 00:00:00'),
        this.dayjs().format('YYYY-MM-DD 23:59:59'),
      ],
      noWatchParams: {
        cityId: '',
        xmbzNo: '',
        handleState: '',
        responsibleDepartmentErrors: '',
        timeStart: this.dayjs().format('YYYY-MM-DD 00:00:00'),
        timeEnd: this.dayjs().format('YYYY-MM-DD 23:59:59'),
      },
      complaintContent: [],
      pickerOptions:{
        onPick: (obj) => {
          this.pickerMinDate = new Date(obj.minDate).getTime();
        },
        disabledDate:(time)=> {
          if (this.pickerMinDate) {
            const day1 =  31 * 24 * 3600 * 1000;
            let maxTime = this.pickerMinDate + day1;
            let minTime = this.pickerMinDate - day1;
            return time.getTime() > maxTime || time.getTime()<minTime;
          }
        }
      },
    }
  },
  methods: {
    search() {
      this.$refs.table.fetch()
    },
    add() {
      this.$refs.addDialog.show({type: 'add'})
    },
    handleOrder(data) {
      this.$refs.handleOrderDialog.show({data})
    },
    handleViewLog(data) {
      this.$refs.orderLogDialog.show({orderId: data.orderId})
    },
    handleDepartmentChange() {
      this.noWatchParams.responsibleDepartmentErrors = this.complaintContent.join(',')
    },
    onSubmit() {
      this.search()
    },
    handleTimeChange() {
      this.noWatchParams.timeStart = this.startAndEndTime && this.startAndEndTime[0]
      this.noWatchParams.timeEnd = this.startAndEndTime && this.startAndEndTime[1]
    },
    handBigPhoto (src) {
      this.$refs.imgDialog.show(src)
    },
    changeAppealImgs (list) {
      if (!list) {
        return
      }
      let imgs = []
      try {
        imgs = JSON.parse(list).appealImgs || []
      } catch (err) {
        imgs = []
      }
      return imgs
    },
    changeHandleImgs (list) {
      if (!list) {
        return
      }
      let imgs = []
      try {
        imgs = JSON.parse(list).handleImgs || []
      } catch (err) {
        imgs = []
      }
      return imgs
    },
  },
  created() {
  },
  components: {
    handleOrderDialog,
    imgDialog,
    orderLogDialog,
  }
}
</script>

<style lang="scss" scoped>
.table {
  .el-form-item {
    margin-bottom: 0px;
  }
}
</style>
